<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-inv-detail-container`]">
      <view class="invoice-row header">
        <view class="left">发票状态</view>
        <view class="center">
          <view class="status">{{ formData.status }}</view>
          <view class="tag">{{ formData.fp_type }}</view>
        </view>
        <view v-if="formData.pdf_url" @click="handleUrl" class="right move">查看电子发票</view>
        <view v-if="formData.pdf_url" @click="exportPDF" class="right move">下载</view>
      </view>
      <view class="invoice-row date">
        <view class="left">开票日期</view>
        <view class="right">{{ formData.update_at }}</view>
      </view>
      <view class="invoice-title">发票详情</view>
      <view class="invoice-row">
        <view class="left">发票抬头</view>
        <view class="right">{{ formData.type }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">发票内容</view>
        <view class="right">{{ formData.electro_content }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">发票金额</view>
        <view class="right price">￥{{ formData.amount }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">备注</view>
        <view class="right">{{ formData.fp_remark }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">注册地址</view>
        <view class="right">{{ formData.register_address }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">注册电话</view>
        <view class="right">{{ formData.register_phone }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">开户银行</view>
        <view class="right">{{ formData.open_bank }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">银行账户</view>
        <view class="right">{{ formData.bank_account }}</view>
      </view>
      <view class="invoice-row">
        <view class="left">申请时间</view>
        <view class="right">{{ formData.create_at }}</view>
      </view>
      <view class="invoice-title detailed">发票明细</view>
      <view class="bill_list" v-for="(item, index) in formData.bill_list" :key="index">
        <view class="project_name">{{ item.project_name }}</view>
        <view class="bill_item" v-for="(items, indexs) in item.room_list" :key="indexs">
          <view class="room_item">{{ items.room_name }}</view>
          <view class="content-item" v-for="(content, i) in items.content" :key="i">
            <view class="year_month">{{ content.year_month + content.item_name }}</view>
            <view class="amount">￥{{ content.amount }}</view>
          </view>
        </view>
      </view>
      <!-- <view class="left">{{item}}</view>
      <view class="invoice-row" v-for="(item, index) in formData.bill_list" :key="index">
        <view class="left">{{item}}</view>
        <view class="right">个人</view>
      </view> -->
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { invoiceDetail } from './api'
export default {
  name: 'detail',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        status: '',
        fp_type: '',
        pdf_url: '',
        type: '',
        electro_content: '',
        amount: '',
        fp_remark: '',
        register_address: '',
        register_phone: '',
        open_bank: '',
        bank_account: '',
        create_at: '',
        bill_list: [],
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await invoiceDetail({ id })
      uni.stopPullDownRefresh()
      for (let key in this.formData) {
        if (data[key]) {
          this.formData[key] = data[key] || ''
        }
      }
    },
    handleUrl() {
      const { pdf_url } = this.formData
      this.$ROUTE.go(pdf_url)
    },
    exportPDF() {
      const { pdf_url } = this.formData
      //  #ifdef H5
      window.open(pdf_url)
      // #endif

      // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
      // #ifdef MP-WEIXIN
      uni.downloadFile({
        url: pdf_url,
        success: (res) => {
          console.log(res)
          if (res.statusCode === 200) {
            // 预览pdf文件
            uni.openDocument({
              filePath: res.tempFilePath,
              showMenu: true, // 右上角菜单，可以进行分享保存pdf
              success: function (file) {
                console.log('file-success', file)
              },
            })
          }
        },
      })
      // #endif

      // #ifdef APP-PLUS
      uni.downloadFile({
        url: pdf_url,
        success: (res) => {
          console.log(res)
          if (res.statusCode === 200) {
            // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                uni.showToast({
                  title: '文件已保存至/DCIM/CAMERA文件夹下',
                  icon: 'none',
                })
                setTimeout(function () {
                  // 预览pdf文件
                  uni.openDocument({
                    filePath: res.tempFilePath,
                    showMenu: true,
                    success: function (file) {
                      console.log('file-success', file)
                    },
                  })
                }, 1500)
              },
              fail: function () {
                uni.showToast({
                  title: '保存失败，请稍后重试！',
                  icon: 'none',
                })
              },
            })
          }
        },
      })
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('inv-detail-container')} {
  position: relative;
  background: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: 30px;
  overflow: hidden;

  .invoice-row {
    background: white;
    display: flex;
    padding: 15px;
    .left {
      min-width: 100px;
    }
    .center {
      display: flex;
      align-items: center;
      .status {
        color: #f59a23;
        margin: 0 15px;
      }
      .tag {
        color: $uv-primary;
        border-color: $uv-primary;
        font-size: 10px;
        border: 1px solid;
        padding: 3rpx 8rpx;
      }
    }
    .right {
      margin-left: auto;
    }
    .move {
      text-decoration: underline;
    }
    .price {
      color: $uv-price-primary;
    }
  }
  .header {
    background: white;
    margin: 10px 0 0;
    padding: 20px 15px;
  }
  .date {
    margin-bottom: 10px;
    padding: 0 15px 10px;
  }
  .invoice-title {
    padding: 15rpx;
    background: white;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
    &::before {
      position: absolute;
      content: ' ';
      left: 15rpx;
      width: 3px;
      height: 21px;
      background: $uv-primary;
    }
  }
  .detailed {
    margin-top: 10px;
  }
  .bill_list {
    background: white;
    .project_name {
      padding: 15px;
      font-weight: bold;
    }
    .bill_item {
      padding: 0 15px;
      .room_item {
        padding: 0 15px;
        position: relative;
        &::before {
          position: absolute;
          content: ' ';
          width: 3px;
          height: 18px;
          left: 8px;
          background: #d37f49;
        }
      }
      .content-item {
        display: flex;
        justify-content: space-between;
        padding: 15px 30px;
        font-size: 12px;
        .year_month {
        }
        .amount {
          color: $uv-price-primary;
        }
      }
    }
  }
}
</style>
